import React, { useEffect, useState } from 'react'
import { IndexBar, List } from 'antd-mobile'
import { cityApi, searchCityApi } from '../../api/ticket'
import {  SearchBar} from 'antd-mobile'
import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { DeleteOutline } from 'antd-mobile-icons'
import withLogin from '../../hoc/withLogin'
function City() {
    const nav = useNavigate()
    const [list, setList] = useState([])
    const [wd, setWd] = useState()
    const [search, setSearch] = useState([])
    const [hot, setHot] = useState([])
    async function fn() {
        let { data: city } = await cityApi()

        setList(city.cityList)
    }
    useEffect(() => {
        fn()
    }, [])
    async function fn2() {
        let { data: city } = await cityApi()
        console.log(city)
        setHot(city.hotCities)
    }
    useEffect(() => {
        fn2()
    }, [])

    async function fn1() {
        let { data: res } = await searchCityApi(wd)
        setSearch(res)

    }
    useEffect(() => {
        fn1()
    }, [wd])

    return (
        <div>

            <NavBar back='返回' onBack={() => nav(-1)}>
                <SearchBar placeholder='请输入内容' onChange={(aa) => setWd(aa)} />
            </NavBar>
            <div>
                <span>历史记录</span>
                <span><DeleteOutline /></span>
            </div>
            <div>热门城市</div>
            <div><span>北京</span><span>上海</span><span>广州</span><span>深圳</span><span>南京</span></div>
            <ul>
                {hot.map((item, index) => {
                    <li key={index}>{item.name}</li>
                })}
            </ul>
            <List header='搜索结果'  >
                {
                    search && search.map((item, index) => {
                        <List.Item key={index}>{item.name}</List.Item>
                    })
                }
            </List>
            <IndexBar style={{ height: '800px' }}>
                {list.map(group => {
                    const { title, items } = group
                    return (
                        <IndexBar.Panel
                            index={title}
                            title={`标题${title}`}
                            key={`标题${title}`}
                        >
                            <List>
                                {items.map((item, index) => (
                                    <List.Item key={index}>{item.name}</List.Item>
                                ))}
                            </List>
                        </IndexBar.Panel>
                    )
                })}
            </IndexBar>

        </div>
    )
}

export default withLogin(City)